<template>
	<cl-dialog
		:visible.sync="visible"
		title="查找客户"
		width="80%"
		:props="{
			appendToBody: true,
			closeOnClickModal: false,
			closeOnPressEscape: false,
			top: '5vh',
			customClass: 'customer-search'
		}"
		@close="close"
	>
		<div class="customer-search__container">
			<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh" >
				<cl-pagefull>
					<template #head>
						<el-form class="search-form" :model="search" ref="form" inline>
							<el-row :gutter="5">
								<el-col :lg="6" :md="12" :sm="24">
									<el-form-item label="所属事业部" prop="biz_id">
										<cl-select
											v-model="search.biz_id"
											placeholder="请选择"
											filterable
											@change="changeBiz"
											style="width: 100%"
										>
											<el-option
												v-for="item in business"
												:key="item.biz_id"
												:label="item.biz_name"
												:value="item.biz_id"
											/>
										</cl-select>
									</el-form-item>
								</el-col>
								<!-- <el-col :lg="8" :md="12" :sm="24">
							<el-form-item label="分公司" prop="company_id">
								<cl-select
									v-model="search.company_id"
									placeholder="请选择"
									filterable
									style="width: 100%"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in companyList"
										:key="item.company_id"
										:label="item.company_name"
										:value="item.company_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :lg="8" :md="12" :sm="24">
							<el-form-item label="品牌" prop="bra_id">
								<cl-select
									v-model="search.bra_id"
									placeholder="请选择"
									filterable
									style="width: 100%"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in brandList"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col> -->
								<el-col :lg="6" :md="12" :sm="24">
									<el-form-item label="门店" prop="dept_id">
										<cl-shop-select
											v-model="search.dept_id"
											placeholder="请选择"
											filterable
											style="width: 100%"
											clearable
											@change="refresh()"
											show-all
											:biz_id="search.biz_id"
										/>
									</el-form-item>
								</el-col>
								<el-col :lg="6" :md="12" :sm="24">
									<el-form-item label="客户关键字" prop="search_content">
										<el-input
											v-model="search.search_content"
											placeholder="微信号/手机号/会员号/姓名"
											clearable
											style="width: 100%"
											@change="refresh()"
										/>
									</el-form-item>
								</el-col>
								<el-col :lg="6" :md="12" :sm="24">
									<el-button
										type="primary"
										icon="el-icon-search"
										:disabled="!search.search_content"
										:loading="loading"
										@click="refresh()"
									>
										查找
									</el-button>
									<el-button
										@click="reset"
										:disabled="!search.search_content || loading"
									>
										重置
									</el-button>
								</el-col>
							</el-row>
						</el-form>
					</template>

					<el-row>
						<!-- 数据表格 -->
						<cl-table v-bind="table">
							<cl-empty slot="empty" tips="暂无数据，请输入关键字查询" />
							<template #column-inherit_id="{ scope: { row } }">
								<div :class="{ 'color-success': !!row.inherit_id }">
									{{ !!row.inherit_id ? "是" : "否" }}
								</div>
							</template>
							<template #column-opt="{ scope: { row } }">
								<div class="flex flex-align-start" v-if="!browser.isMobile">
									<el-button
										type="primary"
										@click="openDetail(row)"
										v-auth="'store_cusdetailindex_look'"
									>
										详情
									</el-button>
									<el-button type="danger" @click="removeClick(row)">
										删除
									</el-button>
									<el-button
										type="success"
										@click="openAddCus(row)"
										v-if="Number(row.inherit_id) <= 0"
										>新增重粉客户</el-button
									>
								</div>
								<el-dropdown class="ml-1" size="medium" v-else>
									<el-button>
										更多<i class="el-icon-arrow-down el-icon--right" />
									</el-button>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>
											<el-button
												type="primary"
												@click="openDetail(row)"
												v-auth="'store_cusdetailindex_look'"
											>
												详情
											</el-button>
										</el-dropdown-item>
										<el-dropdown-item>
											<el-button type="danger" @click="removeClick(row)">
												删除
											</el-button>
										</el-dropdown-item>
										<el-dropdown-item>
											<el-button
												type="success"
												@click="openAddCus(row)"
												v-if="Number(row.inherit_id) <= 0"
												>新增重粉客户</el-button
											>
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</template>
						</cl-table>
					</el-row>
					<!-- <el-row type="flex">
				<cl-flex1 />
				<zm-pagination />
			</el-row> -->
				</cl-pagefull>
			</cl-crud>
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
	name: "cl-customer-search",
	inject: ["$layout"],
	data() {
		return {
			visible: false,
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						label: "客户姓名",
						prop: "cus_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "是否重粉", width: 80, prop: "inherit_id" },
					{ label: "微信号", prop: "cus_wx", minWidth: 120 },
					{ label: "手机号", prop: "cus_mobile", minWidth: 100 },
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "所属门店",
						prop: "dept_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "所属人",
						prop: "belonger",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "创建时间", prop: "addtime", width: 90 },
					{ label: "首次下定时间", prop: "first_deposit", width: 140 },
					{ label: "操作", prop: "opt", width: 260, fixed: "right" }
				]
			},
			// companyList: [],
			// brandList: [],
			shopList: [],
			search: {
				// search_type: 0, //搜索类型(0-全部 ,1-手机,2-客户名称,4-微信)
				search_content: "", //搜索名字
				biz_id: "", //事业部
				// bra_id: "",
				// company_id: ""
				dept_id: ""
			},
			keyword: "",
			total: 0,
			loading: false,
			//重粉
			empty: false //true =>有 false => 无
		};
	},
	computed: {
		...mapState("common", ["visibleCusDetail", "cusFormSubmit"]),
		...mapGetters(["browser"]),
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	watch: {
		// visibleCusDetail(v) {
		// this.$nextTick(() => {
		// 	!v && this.visible && this.refresh();
		// });
		// },
		// cusFormSubmit(v) {
		// v && this.visible && this.refresh();
		// }
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		// this.init();
	},
	methods: {
		open() {
			this.visible = true;
			this.$nextTick(() => {
				this.$refs.form.resetFields();
				this.init();
			});
		},
		close() {
			this.visible = false;
			this.reset();
		},
		openAddCus(row) {
			if (!this.empty) {
				this.$layout.openAddCus();
				this.$layout.getSearch({
					biz_id: this.search.biz_id,
					dept_id: this.search.dept_id
				});
			} else {
				const { cus_mobile, dept_id } = row;
				// if (!cus_mobile || cus_mobile == "-" || !dept_id) {
				// 	const promptStr =
				// 		!cus_mobile && !dept_id
				// 			? "所属门店和手机号"
				// 			: !cus_mobile || cus_mobile == "-"
				// 			? "手机号"
				// 			: "所属门店";
				// 	this.$message.warning(`客户信息未完善，请完善客户的${promptStr}!`);
				// 	return;
				// }
				this.$layout.openAddCus(row, { haveFan: true });
			}
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.customer)
				.set("dict", { api: { page: "searchCus" } })
				.done();
			app.refresh();
		},
		async onRefresh(params, { next, render,done }) {
			if(params.search_content&&params.search_content.length < 2){
				this.$message.error("使用关键字搜索时中文至少2位查询，其他至少4位可查询");
				return done();
			}
			this.loading = true;
			const { search_content } = this.search;
			this.empty = false;
			this.total = 0;
			this.keyword = search_content;
			if (!search_content) {
				render([]);
				this.loading = false;
				return;
			}
			const list = await next({
				...params,
				...this.search
			});
			this.total = list.length;
			this.empty = !!list.length;
			if (this.browser.isMobile) {
				this.table.columns[this.table.columns.length - 1].width = 100;
			}
			render(list);
			this.loading = false;
			if (!this.empty && this.$auth("store_shopaddcus")) {
				this.confirm("暂无此客户，是否立即添加").then(() => {
					this.openAddCus();
				});
			}
		},
		// crud刷新
		refresh() {
			console.log("crud");
			const refresh = this.$refs.crud.refresh;
			refresh && refresh({ page: 1, ...this.search });
		},
		// 打开详情
		openDetail(row) {
			this.$layout.openCusDetail(row, "new-appoint");
		},
		// 删除
		removeClick({ cus_id, biz_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.customer.del({ cus_id, biz_id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		reset() {
			this.search = {
				...this.search,
				search_content: "",
				bra_id: "",
				company_id: "",
				dept_id: ""
			};
			this.empty = false;
			this.$refs.form.resetFields();
			this.init();
			this.refresh();
		},
		init() {
			const { biz_id } = this.search;
			this.getBizRefShop(biz_id);
		},
		changeBiz() {
			this.search = {
				...this.search,
				bra_id: "",
				company_id: "",
				dept_id: ""
			};
			this.init();
			this.refresh();
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog__body {
		overflow: auto;
		padding: 0 10px;
		.el-col {
			margin-bottom: 10px;
		}
	}
	.search-form {
		.el-form-item {
			margin-bottom: 0;
			display: flex;
			&__content {
				flex: 1;
			}
		}
	}
}
.customer-search {
	&__container {
		height: 74vh;
		// overflow: auto;
	}
}
</style>
